$(()=>{
    (()=>{
    /* 全局索引 and 轮播图的定时器 */
        let index=0,timer=null
    /* 根据图片数量创建索引 */
    $('.content>img').each(index=>{
        $('.direction').append($('<span></span>'))
    })
    /* 初始化图片的位置 */
    for(let i=1;i<$('.content>img').length;i++) {
        $('.content>img').eq(i).fadeOut(50)
    }
    /* 初始化第一个指示器为选择中状态 */
    $('.direction').children().eq(0).addClass('active')
    /* 开启定时器 */
    set()
    /* 监听鼠标的进入状态 */
    $('#box').mouseenter(()=>{
        clearInterval(timer)
        $('#box>i').stop().fadeIn(350)
    })
    $('#box').mouseleave(()=>{
        $('#box>i').stop().fadeOut(350)
        set()
    })
    /* 监听索引的鼠标进入  进入关闭定时器  离开就不用再开启了 因为离开父容器会开启定时器*/  
    $('.direction>span').mouseenter(function(){
        clearInterval(timer)
        /* 排他 */
        $('.direction>span').each(item=>{
            $('.direction>span').removeClass('active')
        })
        /* 只给当前鼠标选中项和index当前值设置class */
        $('.direction>span').eq(index).addClass('active')
        $(this).addClass('active')
        /* 鼠标按下清除样式 */
        $('.direction>span').mousedown(function(){
            index=$(this).index()
            $(this).addClass('active')
            $(this).siblings().removeClass('active')
            let current=$('.content>img').eq(index)
            current.stop().fadeIn(350)
            current.siblings().stop().fadeOut(350)
        })
    })
    $('.direction>span').mouseleave(()=>{
        $('.direction>span').eq(index).addClass('active')
        $('.direction>span').eq(index).siblings().removeClass('active')
    })
    /* 上一张的按钮的点击 */
    $('.prevent').mousedown(()=>{
        clearInterval(timer)
        index--
        if(index<0) {
            index=$('.content>img').length-1
        }
        $('.content>img').eq(index).stop().fadeIn(350)
        $('.content>img').eq(index).siblings().stop().fadeOut(350)
        /* 更新索引 */
        $('.direction>span').eq(index).addClass('active')
        $('.direction>span').eq(index).siblings().removeClass('active')
    })
    $('.prevent').mouseenter(()=>{
        $('.prevent').css({'background-color':'black',
        'opacity':'.5'
        })
    })
    $('.prevent').mouseleave(()=>{
        $('.prevent').css({'background-color':'transparent',
        'opacity':'1'
        })
    })
    $('.next').mouseenter(()=>{
        $('.next').css({'background-color':'black',
        'opacity':'.5'
        })
    })
    $('.next').mouseleave(()=>{
        $('.next').css({'background-color':'transparent',
        'opacity':'1'
        })
    })
    $('.next').mousedown(()=>{
        clearInterval(timer)
        index++
        if(index>$('.content>img').length-1) {
            index=0
        }
        $('.content>img').eq(index).stop().fadeIn(350)
        $('.content>img').eq(index).siblings().stop().fadeOut(350)
        /* 更新索引 */
        $('.direction>span').eq(index).addClass('active')
        $('.direction>span').eq(index).siblings().removeClass('active')
    })

    /* 定时器 */
    function set() {
        timer=setInterval(()=>{
        index++
        if(index>$('.content').children().length-1){
            index=0
        }
        let img=$('.content').children().eq(index)
        img.stop().fadeIn(350)
        img.siblings().stop().fadeOut(350)
        let span=$('.direction').children().eq(index)
        span.addClass("active")
        span.siblings().removeClass("active")
    },3000)
    }

    /* 头部部分 */
    $('.buycar').hover(()=>{
        $('.buycar>a').css('color','orangered')
        $('.buycar>.show').slideDown(150)
        $('.buycar img').attr('src','./images/buycar_hover.png')
    },()=>{
        $('.buycar>a').css('color','#b0b0b0')
        $('.buycar>.show').slideUp(150)
        $('.buycar img').attr('src','./images/buycar.png')

    })
    $('.logo_home').hover(()=>{
        $('.logo_home>img:nth-child(2)').animate({'left':50},300)
        $('.logo_home>img:nth-child(1)').animate({'left':0},300)
    },()=>{
        $('.logo_home>img:nth-child(2)').animate({'left':0},300)
        $('.logo_home>img:nth-child(1)').animate({'left':-50},300)
    })

    /* 获取焦点 */
    $('section>.search>input').focus(()=>{
        $('section>.search>input').css('border','1px solid skyblue')
        $('section>.search>img').css('border-left','1px solid skyblue')
    })
    $('section>.search>input').blur(()=>{
        $('section>.search>input').css('border','1px solid #b0b0b0')
        $('section>.search>img').css('border-left','1px solid #b0b0b0')
    })
    })()

    /* 秒杀 */
    let target=new Date('2019-12-12 12:00:00').getTime()/1000
    setInterval(() => {
            //    当前时间秒数
    let begin=new Date().getTime()/1000
    /* 倒计时 */
    let time=target-begin
    let leave1=change(parseInt(time%(24*3600)))
    let hours=change(parseInt(leave1/60/60))
    let minuts=change(parseInt(leave1/60%60))
    let second=change(parseInt(time%60))
    $('.count').html(`<span>${hours}</span>:<span>${minuts}</span>:<span>${second}</span>`)
    }, 1000);
    function change(data) {
        if(data>=10) {
            return data
        }else {
            return '0'+data
        }
    }
    /* 商品列表 */
    let now=0,timerid
    $('.right_btn>.last').click(()=>{
        clearInterval(timerid)
         now=now-1080
         if(now<=-3240) {
             now=0
         }
        $('#content>ul').animate({'left':now},600)
        TimerId()
    })
    $('.right_btn>.back').click(()=>{
        clearInterval(timerid)
        now=now+1080
        if(now=0) {
            now=-3240
        }
        $('#content>ul').animate({'left':now},600)
        TimerId()
    })
    /* 页面加载开启定时器 */
    TimerId()

    /* 秒杀专场的定时器 */
    function TimerId() {
        timerid=setInterval(() => {
            now=now-1080
            if(now<=-3240) {
                now=0
            }
            $('#content>ul').animate({'left':now},500)
        }, 3000);
    }
        /* 导航进入事件部分*/
        $('section>ul>li>a').mouseenter(function(){
            $('.slider_show').stop().animate({'opacity':1},300)
            $('.slider_show').css('zIndex','999')
            $('section>ul>li>a').css('color','black')
            $(this).css('color','orangered')
            /* 鼠标进入幕布的事件 对应导航颜色跟随变化 */
            $('.slider_show').mouseenter(()=>{
                $('section>ul>li>a').css('color','black')
                $(this).css('color','orangered')
                $('.slider_show').stop().animate({'opacity':1},300)
                $('.slider_show').css('zIndex','999')
            })

            /* 此处请求数据...省略 */
        })

        /* 离开事件 部分 */
        $('.slider_show').mouseleave(()=>{
            $('section>ul>li>a').css('color','black')
            $('.slider_show').stop().animate({'opacity':0},300,()=>{
                $('.slider_show').css('zIndex','-999')
            })
        })
        $('section>ul').mouseleave(()=>{
            $('section>ul>li>a').css('color','black')
            $('.slider_show').stop().animate({'opacity':0},300,()=>{
                $('.slider_show').css('zIndex','-999')
            })
        })
        /* 侧边栏选项卡 进入事件 */
        $('.swiper_tabbar>ul>li').mouseenter(()=>{
            $('.right_slider').stop().animate({'opacity':1},300)
            $('.right_slider').css('zIndex','999')
        })
        $('.right_slider').mouseenter(()=>{
            $('.right_slider').stop().animate({'opacity':1},300)
            $('.right_slider').css('zIndex','999')
        })

        /* 侧边栏的离开部分 */
        $('.swiper_tabbar>ul').mouseleave(()=>{
            $('.right_slider').stop().animate({'opacity':0},300)
            $('.right_slider').css('zIndex','-999')
        })
        $('.right_slider').mouseleave(()=>{
            $('.right_slider').stop().animate({'opacity':0},300)
            $('.right_slider').css('zIndex','-999')
        })

        // 漂浮广告部份
        let flag = true, x = 0, y = 0;
        let FatherW = $(window).width();
        let FatherH = $(window).height();
        let SonW = $('.floating').width();
        let SonH = $('.floating').height();
        let ScreenW = FatherW - SonW;
        let ScreenH = FatherH - SonH;
        function floating() {
            flag ? x++ : x--;
            if(x >= ScreenW ) { x = ScreenW; }
            if(x>=ScreenW && y >= ScreenH) flag = false;
            if(x < 0 ) { x = 0; flag = true; }
            flag ? y++ : y--
            if(y >= ScreenH) { x = ScreenW;}
            if(y < 0 ) { y = 0; flag = true; }
            $('.floating').css({right: x, top: y});
        }
        setInterval(floating, 20);
}
)